<template>
<div class="task-performance">
    <el-button type="primary" plain @click="getCondition">执行情况</el-button>
    <el-dialog  title="执行情况" :visible.sync="outerVisible">
        <template>
            <el-table :data="tableData1" style="width: 100%;margin-bottom: 20px;" row-key="areaCode" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="areaName" label="采集区域"></el-table-column>
                <el-table-column prop="count" label="全部图斑"></el-table-column>
                <el-table-column prop="count2" label="已采集"></el-table-column>
                <el-table-column prop="count3" label="已审核"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看采集人员</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </template>
        <el-dialog  width="50%" title="查看采集人员" :visible.sync="innerVisible" append-to-body>
            <el-row :gutter="20">
                <el-col :span="10">
                    <div class="grid-content bg-purple">
                        选择辖区 :
                        <el-select  @change="selectChange" v-model="value1" placeholder="请选择">
                            <el-option  v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-select  @change="selectChange"  v-model="value2" placeholder="请选择">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">图斑总数 : {{ allPatternSpot }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">已采集 :{{ spidered }}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">未采集 : {{ checked }}</div>
                </el-col>
            </el-row>
            <template>
                <el-table :data="amountData" border style="width: 100%">
                    <el-table-column fixed prop="realName" label="姓名"></el-table-column>
                    <!-- <el-table-column fixed prop="userName" label="手机号码"></el-table-column> -->
                    <el-table-column prop="townName" label="镇街"></el-table-column>
                    <el-table-column prop="villageName" label="村居"></el-table-column>
                    <el-table-column prop="collectNum" label="已采集图斑数"></el-table-column>
                    <el-table-column prop="collectFailNum" label="未采集图斑数"></el-table-column>
                </el-table>
            </template>
        </el-dialog>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: 'TaskPerformance',
    props: {
        planId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            allPatternSpot: 0,
            spidered: 0,
            checked: 0,
            level: 1,
            outerVisible: false,
            innerVisible: false,
            amountData: [],
            //   表格数据
            tableData1: [],
            options1: [],
            options2: [],
            value1: '',
            value2: '',
            areaCode:null
            //   select
        };
    },
    methods: {
        selectChange(areaCode) {
            this.areaCode = areaCode
            this.handleClick()
        },
        handleClick(row) {
            this.$axios.get('/rbac/data/CollectTaskLand/userList', {
                params: {
                    'collectTaskLand.planId': this.planId,
                    'areaCode': this.areaCode || row.areaCode
                }
            }).then((res) => {
                this.innerVisible = true;
                this.amountData = res.data.list;

                this.allPatternSpot = row.count;
                this.spidered = row.count3;
                this.checked = row.count2;
            })

        },
        getCondition() {
            this.$axios.post('rbac/data/CollectPlanLand/Condition', {
                params: {
                    'collectTaskLand.planId': this.planId
                }
            }).then((res) => {
                this.tableData1 = res.data
                this.outerVisible = true
                this.options1 = []
                this.options2 = []
                    this.tableData1.forEach(item => {
                        this.options1.push({
                            label: item.areaName,
                            value: item.areaCode
                        });
                        item.children.forEach(element => {
                            this.options2.push({
                                label: element.areaName,
                                value: element.areaCode
                            });
                        });
                    });
                this.value1 = this.options1[0].value
                // this.value2 = this.options2[0].value
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.task-performance {
    .el-dialog__header {
        .el-dialog__title {
            font-weight: 900;
            font-size: 14px;
        }
    }

    .el-dialog__body {
        padding: 5px 20px 30px 20px;

        // background: #f0f8fa;
        .is-leaf {
            background: #349efa;
            color: #fff;
            padding: 0;
        }

        .cell {
            text-align: center;
        }
    }
}

.el-dialog {
    .el-dialog__header {
        .el-dialog__title {
            font-weight: 900;
            font-size: 14px;
        }
    }

    .el-dialog__body {
        padding: 5px 20px 30px 20px;

        // background: #f0f8fa;
        .is-leaf {
            background: #349efa;
            color: #fff;
            padding: 0;
        }

        .cell {
            text-align: center;
        }

        .el-row {
            line-height: 40px;
            margin-bottom: 10px;

            .el-select {
                width: 28%;
                margin: 0 10px;
            }
        }
    }
}
</style>
